{*
SPDX-FileCopyrightText: © 2022 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- import "/_libs/common" -}}

<turbo-frame id="bookmark-title-{{ .ID }}" class="print:hidden leading-normal">
<form action="{{ urlFor(`/bookmarks`, .ID) }}" method="post"
 class="flex gap-2 items-baseline group"
 data-controller="inplace-input turbo-form"
 data-turbo-form-action-value="{{ urlFor(`/api/bookmarks`, .ID) }}"
 data-turbo-form-method-value="patch"
 data-inplace-input-hidden-class="hidden">
 {{ yield csrfField() }}

  <h1 class="no-js:hidden text-3xl max-sm:text-2xl flex-grow mr-2 cursor-pointer hover:outline-std"
   dir="{{ default(.TextDirection, `ltr`) }}"
   data-inplace-input-target="editable">{{ .Title }}</h1>
  {* Classic input field shown in no-JS *}
  <input type="text" name="title" value="{{ .Title }}"
   class="js:hidden form-input font-semibold min-w-full flex-grow"
   data-inplace-input-target="value" />
  <button type="submit" class="text-h2 text-gray-300 group-hover:text-primary group-fw:text-primary"
   data-inplace-input-target="button">
    {{- yield icon(name="o-pencil", svgClass="h-6 w-6", attrs=attrList("data-inplace-input-target", "iconOff")) -}}
    {{- yield icon(name="o-check-on", class="hidden", svgClass="h-6 w-6", attrs=attrList("data-inplace-input-target", "iconOn")) -}}
  </button>
</form>
</turbo-frame>
